<!-- 城市详情 -->
<template>
  <div class="region-page">
    <!-- 顶部导航 -->
    <nav-bar :activeComponent="activeComponent"></nav-bar>

    <!-- 地区封面 -->
    <section class="region-cover">
      <div class="cover-image" v-if="region.coverImage" :style="{ backgroundImage: `url(${region.coverImage})` }">
        <div class="cover-content">
          <h1>{{ region.name }}</h1>
          <p class="region-slogan">{{ region.slogan }}</p>
          <div class="region-stats">
            <div class="stat">
              <span class="value">{{ region.visitCount }}</span>
              <span class="label">游客数量</span>
            </div>
            <div class="stat">
              <span class="value">{{ region.spotCount }}</span>
              <span class="label">景点数量</span>
            </div>
            <div class="stat">
              <span class="value">{{ region.rating }}</span>
              <span class="label">评分</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 主内容区 -->
    <main class="region-content">
      <!-- 地区基本信息 -->
      <section id="info" class="region-info section">
        <h2 class="section-title">地区基本信息</h2>
        <div class="info-content">
          <div class="info-left">
            <img :src="region.mainImage" alt="地区图片" class="region-main-image" />
          </div>
          <div class="info-right">
            <div class="info-item">
              <strong>地区名称：</strong>{{ region.name }}
            </div>
            <div class="info-item">
              <strong>所在位置：</strong>{{ region.location }}
            </div>
            <div class="info-item">
              <strong>面积：</strong>{{ region.area }}
            </div>
            <div class="info-item">
              <strong>人口：</strong>{{ region.population }}
            </div>
            <div class="info-item">
              <strong>语言：</strong>{{ region.language }}
            </div>
            <div class="info-item">
              <strong>货币：</strong>{{ region.currency }}
            </div>
            <div class="info-item">
              <strong>最佳旅游时间：</strong>{{ region.bestTimeToVisit }}
            </div>
            <div class="info-description">
              <p v-for="(paragraph, index) in region.description" :key="index">{{ paragraph }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 地区气候 -->
      <section id="climate" class="region-climate section">
        <h2 class="section-title">地区气候</h2>
        <div class="climate-content">
          <div class="climate-chart">
            <canvas ref="climateChart"></canvas>
          </div>
          <div class="climate-info" v-if="region.climate && region.climate.seasons">
            <div class="season" v-for="(season, index) in region.climate.seasons" :key="index">
              <h3>{{ season.name }}</h3>
              <p>{{ season.description }}</p>
              <div class="climate-data">
                <div class="climate-item">
                  <i class="icon-temperature"></i>
                  <span>{{ season.temperature }}</span>
                </div>
                <div class="climate-item">
                  <i class="icon-humidity"></i>
                  <span>{{ season.humidity }}</span>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 热门景点 -->
      <section id="popular" class="popular-spots section">
        <h2 class="section-title">热门景点</h2>
        <div class="spots-carousel">
          <div class="carousel-container" ref="popularSpotsCarousel">
            <div class="carousel-slide" v-for="spot in region.popularSpots" :key="spot.id">
              <div class="spot-card">
                <div class="spot-image">
                  <img :src="spot.image" :alt="spot.name" />
                  <div class="spot-rating">{{ spot.rating }}</div>
                </div>
                <div class="spot-info">
                  <h3 class="spot-name">{{ spot.name }}</h3>
                  <p class="spot-desc">{{ spot.shortDescription }}</p>
                  <div class="spot-meta">
                    <span class="spot-visitors">{{ spot.visitorsCount }}人去过</span>
                    <span class="spot-price">¥{{ spot.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button class="carousel-prev" @click="prevPopularSpot">&#10094;</button>
          <button class="carousel-next" @click="nextPopularSpot">&#10095;</button>
        </div>
      </section>

      <!-- 所有景点信息 -->
      <section id="all-spots" class="all-spots section">
        <h2 class="section-title">所有景点信息</h2>
        <div class="spots-filter">
          <div class="filter-group">
            <label>类型：</label>
            <select v-model="spotFilters.type">
              <option value="">全部</option>
              <option v-for="type in spotTypes" :key="type" :value="type">{{ type }}</option>
            </select>
          </div>
          <div class="filter-group">
            <label>价格范围：</label>
            <select v-model="spotFilters.priceRange">
              <option value="">全部</option>
              <option value="free">免费</option>
              <option value="low">¥1-50</option>
              <option value="medium">¥51-100</option>
              <option value="high">¥100以上</option>
            </select>
          </div>
          <div class="filter-group">
            <label>评分：</label>
            <select v-model="spotFilters.rating">
              <option value="">全部</option>
              <option value="5">5星</option>
              <option value="4">4星及以上</option>
              <option value="3">3星及以上</option>
            </select>
          </div>
          <button class="filter-apply" @click="applyFilters">
            <i class="fas fa-filter"></i> 应用筛选
          </button>
          <button class="filter-reset" @click="resetFilters">
            <i class="fas fa-undo"></i> 重置筛选
          </button>
        </div>
        <div class="spots-list">
          <table class="spots-table">
            <thead>
            <tr>
              <th @click="sortSpots('name')">景点名称</th>
              <th @click="sortSpots('type')">类型</th>
              <th @click="sortSpots('price')">价格</th>
              <th @click="sortSpots('openTime')">开放时间</th>
              <th @click="sortSpots('visitDuration')">游览时长</th>
              <th @click="sortSpots('rating')">评分</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="spot in filteredSpots" :key="spot.id">
              <td>{{ spot.name }}</td>
              <td>{{ spot.type }}</td>
              <td>{{ spot.price === 0 ? '免费' : '¥' + spot.price }}</td>
              <td>{{ spot.openTime }}</td>
              <td>{{ spot.visitDuration }}</td>
              <td>
                <div class="star-rating">
                  <span v-for="n in 5" :key="n" :class="{ 'filled': n <= spot.rating }">★</span>
                  <span class="rating-number">{{ spot.rating.toFixed(1) }}</span>
                </div>
              </td>
              <td>
                <button class="btn-view-details" @click="viewSpotDetails(spot.id)">
                  <i class="fas fa-info-circle"></i> 查看详情
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="spots-pagination">
          <button :disabled="currentPage === 1" @click="changePage(currentPage - 1)">上一页</button>
          <span v-for="n in totalPages" :key="n"
                :class="{ 'active': currentPage === n }"
                @click="changePage(n)">{{ n }}</span>
          <button :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">下一页</button>
        </div>
      </section>


      <!-- 地区美食 -->
      <section id="food" class="region-food section">
        <h2 class="section-title">地区美食</h2>
        <div class="food-categories">
          <div class="category-tab"
               v-for="(category, index) in foodCategories"
               :key="index"
               :class="{ 'active': activeFoodCategory === category }"
               @click="activeFoodCategory = category">
            {{ category }}
          </div>
        </div>
        <transition-group name="food-fade" tag="div" class="food-grid">
          <div class="food-card" v-for="food in displayedFoods" :key="food.id">
            <div class="food-image">
              <img :src="food.image" :alt="food.name" />
            </div>
            <div class="food-info">
              <h3>{{ food.name }}</h3>
              <p>{{ food.description }}</p>
            </div>
          </div>
        </transition-group>
        <!-- 添加展开/收起按钮 -->
        <div class="show-more-container" v-if="filteredFoods.length > foodDisplayLimit">
          <button class="btn-show-more" @click="showAllFoods = !showAllFoods">
            {{ showAllFoods ? '收起' : '显示全部' + filteredFoods.length + '个美食' }}
            <i :class="showAllFoods ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
          </button>
        </div>
      </section>

      <!-- 地区游记 -->
      <section id="travel-notes" class="travel-notes section">
        <h2 class="section-title">游记分享</h2>
        <div class="notes-filter">
          <div class="filter-buttons">
            <button :class="{ 'active': activeTravelFilter === 'popular' }"
                    @click="activeTravelFilter = 'popular'">热门游记</button>
            <button :class="{ 'active': activeTravelFilter === 'recent' }"
                    @click="activeTravelFilter = 'recent'">最新游记</button>
            <button :class="{ 'active': activeTravelFilter === 'recommended' }"
                    @click="activeTravelFilter = 'recommended'">官方推荐</button>
          </div>
          <div class="notes-search">
            <input type="text" v-model="travelNoteSearch" placeholder="搜索游记..." />
            <button @click="searchTravelNotes">搜索</button>
          </div>
        </div>
        <div class="notes-list">
          <div class="travel-note" v-for="note in paginatedTravelNotes" :key="note.id">
            <div class="note-header">
              <div class="note-author">
                <img :src="note.author.avatar" :alt="note.author.name" class="author-avatar" />
                <span class="author-name">{{ note.author.name }}</span>
              </div>
              <div class="note-meta">
                <span class="note-date">{{ formatDate(note.date) }}</span>
                <span class="note-views">{{ note.views }}浏览</span>
                <span class="note-likes">{{ note.likes }}点赞</span>
              </div>
            </div>
            <div class="note-content">
              <h3 class="note-title">{{ note.title }}</h3>
              <div class="note-images">
                <img v-for="(image, index) in note.images.slice(0, 3)" :key="index" :src="image" />
                <div v-if="note.images.length > 3" class="more-images">+{{ note.images.length - 3 }}</div>
              </div>
              <p class="note-excerpt">{{ note.excerpt }}</p>
            </div>
            <div class="note-footer">
              <div class="note-tags">
                <span v-for="(tag, index) in note.tags" :key="index" class="tag">{{ tag }}</span>
              </div>
              <button class="btn-read-more" @click="readTravelNote(note.id)">阅读全文</button>
            </div>
          </div>
        </div>
        <div class="notes-pagination">
          <button :disabled="currentNotePage === 1" @click="changeNotePage(currentNotePage - 1)">上一页</button>
          <span v-for="n in totalNotePages" :key="n"
                :class="{ 'active': currentNotePage === n }"
                @click="changeNotePage(n)">{{ n }}</span>
          <button :disabled="currentNotePage === totalNotePages" @click="changeNotePage(currentNotePage + 1)">下一页</button>
        </div>
        <div class="write-note">
          <button class="btn-write-note" @click="openWriteNoteForm">写游记</button>
        </div>
      </section>

      <!-- 相关推荐 -->
      <section class="related-regions section">
        <h2 class="section-title">相关地区推荐</h2>
        <div class="related-grid">
          <div class="related-card" v-for="related in region.relatedRegions" :key="related.id" @click="navigateToRegion(related.id)">
            <div class="related-image">
              <img :src="related.image" :alt="related.name" />
            </div>
            <div class="related-info">
              <h3>{{ related.name }}</h3>
              <p>{{ related.description }}</p>
              <!-- <div class="related-similarity">
                <span>相似度: {{ related.similarity }}%</span>
              </div> -->
            </div>
          </div>
        </div>
      </section>

      <!-- 评论区 -->
      <CommentSection :cityId="props.regionId" :commentType="'city'" />
    </main>

    <!-- 底部 Footer -->
    <FooterComponent />

  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick, defineProps } from 'vue';
import Chart from 'chart.js/auto';
import NavBar from "@/components/NavBar.vue";
import CommentSection from '@/components/CommentSection.vue';
import FooterComponent from '@/components/common/FooterComponent.vue';
import { getCityDetail, getCityPopularSpots, getAllCitySpots, getCityFoods, getCityTravelNotes } from "@/api/citydetail";
import { useRouter } from 'vue-router';

// 创建 router 实例
const router = useRouter();

// 定义属性
const props = defineProps({
  regionId: {
    type: [String, Number],
    required: true
  }
});

// 组件数据
const activeComponent = ref('destinations');
const region = ref({});
const isLoading = ref(true);
const error = ref(null);

// 景点相关状态
const spotFilters = reactive({
  type: '',
  priceRange: '',
  rating: '',
});
const spotTypes = ref([]);
const currentPage = ref(1);
const itemsPerPage = 10;
const totalPages = ref(1);

// 筛选和排序
const sortKey = ref('name');
const sortDirection = ref('asc');

// 气候图表
const climateChart = ref(null);

// 美食相关
const foodCategories = ref([]);
const activeFoodCategory = ref('全部');
const showAllFoods = ref(false);
const foodDisplayLimit = 6;

// 游记相关
const activeTravelFilter = ref('popular');
const travelNoteSearch = ref('');
const currentNotePage = ref(1);
const noteItemsPerPage = 3;

// 轮播相关
const popularSpotsCarousel = ref(null);
const currentSlide = ref(0);


// 模拟数据（实际应用中从API获取）
const mockRegionData = {
  // 相关地区
  relatedRegions: [
    {
      id: 101,
      name: '黄龙',
      image: 'https://placekitten.com/250/150',
      description: '黄龙以彩池、雪山、峡谷、森林"四绝"著称，与九寨沟同属于世界自然遗产，距离九寨沟约100公里。',
      similarity: 85
    },
    {
      id: 102,
      name: '稻城亚丁',
      image: 'https://placekitten.com/251/151',
      description: '稻城亚丁被誉为"最后的香格里拉"，拥有神圣雪山、纯净湖泊、广阔草甸和古老森林。',
      similarity: 78
    },
    {
      id: 103,
      name: '四姑娘山',
      image: 'https://placekitten.com/252/152',
      description: '四姑娘山由四座连绵不断的山峰组成，以雄伟壮丽的山岳景观和丰富多彩的生态系统而闻名。',
      similarity: 72
    },
    {
      id: 104,
      name: '若尔盖草原',
      image: 'https://placekitten.com/253/153',
      description: '若尔盖草原是中国三大湿地之一，夏季草原繁花似锦，是观赏高原风光的绝佳去处。',
      similarity: 68
    }
  ]
};

// 计算属性
const filteredSpots = computed(() => {
  return region.value.allSpots || [];
});


// 地区美食计算属性
const filteredFoods = computed(() => {
  const foods = region.value.foods || [];

  if (!foods.length) {
    return [];
  }

  if (activeFoodCategory.value === '全部') {
    return foods;
  } else {
    return foods.filter(food => food.category === activeFoodCategory.value);
  }
});

const displayedFoods = computed(() => {
  const foods = filteredFoods.value;
  if (showAllFoods.value || foods.length <= foodDisplayLimit) {
    return foods;
  } else {
    return foods.slice(0, foodDisplayLimit);
  }
});

// 修改游记的筛选计算属性
const filteredTravelNotes = computed(() => {
  if (!region.value.travelNotes || !Array.isArray(region.value.travelNotes)) {
    return [];
  }

  let result = [...region.value.travelNotes];

  // 应用筛选
  switch (activeTravelFilter.value) {
    case 'popular':
      result.sort((a, b) => b.likes - a.likes);
      break;
    case 'recent':
      result.sort((a, b) => new Date(b.date) - new Date(a.date));
      break;
    case 'recommended':
      result = result.filter(note => note.isRecommended);
      break;
  }

  // 应用搜索
  if (travelNoteSearch.value.trim()) {
    const searchTerm = travelNoteSearch.value.toLowerCase();
    result = result.filter(note => {
      // 标题中搜索
      if (note.title && note.title.toLowerCase().includes(searchTerm)) {
        return true;
      }

      // 摘要中搜索
      if (note.excerpt && note.excerpt.toLowerCase().includes(searchTerm)) {
        return true;
      }

      // 作者名中搜索
      if (note.author && note.author.name && note.author.name.toLowerCase().includes(searchTerm)) {
        return true;
      }

      // 标签中搜索
      if (note.tags && Array.isArray(note.tags)) {
        return note.tags.some(tag => tag.toLowerCase().includes(searchTerm));
      }

      return false;
    });
  }

  return result;
});

const paginatedTravelNotes = computed(() => {
  const start = (currentNotePage.value - 1) * noteItemsPerPage;
  const end = start + noteItemsPerPage;
  return filteredTravelNotes.value.slice(start, end);
});

const totalNotePages = computed(() => {
  return Math.ceil(filteredTravelNotes.value.length / noteItemsPerPage);
});

// 方法
// 初始化气候图表
const initClimateChart = () => {
  const ctx = document.querySelector('#climate canvas')?.getContext('2d');
  if (!ctx || !region.value.climate || !region.value.climate.months) return;

  const labels = region.value.climate.months.map(month => month.name);
  const tempData = region.value.climate.months.map(month => month.temperature);
  const rainfallData = region.value.climate.months.map(month => month.rainfall);

  // 添加检查，确保climateChart.value存在并且有destroy方法
  if (climateChart.value && typeof climateChart.value.destroy === 'function') {
    climateChart.value.destroy();
  }

  climateChart.value = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: '平均温度 (°C)',
          data: tempData,
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          yAxisID: 'y',
        },
        {
          label: '降水量 (mm)',
          data: rainfallData,
          borderColor: 'rgb(54, 162, 235)',
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          yAxisID: 'y1',
        }
      ]
    },
    options: {
      responsive: true,
      interaction: {
        mode: 'index',
        intersect: false,
      },
      scales: {
        y: {
          type: 'linear',
          display: true,
          position: 'left',
          title: {
            display: true,
            text: '温度 (°C)'
          }
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right',
          title: {
            display: true,
            text: '降水量 (mm)'
          },
          grid: {
            drawOnChartArea: false,
          },
        },
      }
    }
  });
};

// 初始化热门景点轮播
const initPopularSpotsCarousel = () => {
  if (!popularSpotsCarousel.value) return;

  const slideWidth = popularSpotsCarousel.value.querySelector('.carousel-slide')?.offsetWidth || 0;
  const slidesCount = region.value.popularSpots?.length || 0;

  // 设置轮播容器宽度
  popularSpotsCarousel.value.style.width = `${slideWidth * slidesCount}px`;
};

// 修改获取城市数据的方法，添加获取热门景点的调用
const fetchRegionData = async (regionId) => {
  try {
    isLoading.value = true;
    error.value = null;

    // 调用API获取城市详情
    const response = await getCityDetail(regionId);

    if (response && response.data) {
      // 获取API返回的城市数据
      const cityData = response.data;

      // 获取热门景点
      const spotResponse = await getCityPopularSpots(regionId, 3); // 获取前3个热门景点

      // 转换热门景点数据格式
      let popularSpotsData = [];
      if (spotResponse && spotResponse.data) {
        popularSpotsData = spotResponse.data.map(spot => ({
          id: spot.spotId,
          name: spot.spotName,
          image: spot.coverImage, // 如果没有封面图，使用默认图片
          rating: spot.score,
          shortDescription: spot.description,
          visitorsCount: spot.visitorsCount || 0,
          price: spot.averageCost || 0
        }));
      }

      // 获取所有景点数据，默认第1页，每页10条
      const allSpotData = await fetchAllSpots(regionId, 1);

      // 获取城市美食数据
      const foodsData = await fetchCityFoods(cityData.cityId);

      // 获取城市游记数据
      const travelNotesResponse = await getCityTravelNotes(regionId);
      let travelNotesData = [];

      if (travelNotesResponse && travelNotesResponse.data) {
        console.log("游记数据获取成功:", travelNotesResponse.data);
        travelNotesData = processTravelNotes(travelNotesResponse.data.travelogues || []);
      } else {
        console.warn("未能获取到游记数据或数据为空");
      }

      // 将API返回的数据映射到region对象
      region.value = {
        id: cityData.cityId,
        name: cityData.name,
        code: regionId,
        slogan: cityData.subtitle,
        location: cityData.address,
        area: `约 ${cityData.area} 公顷`,
        population: `约 ${cityData.population.toLocaleString()} 人`,
        language: cityData.language.join('、'),
        currency: cityData.currency,
        bestTimeToVisit: cityData.season.join('、'),
        coverImage: cityData.coverImage,
        mainImage: cityData.mainImage,
        description: [cityData.description],
        coordinates: {
          lat: cityData.centerLat,
          lng: cityData.centerLng
        },
        visitCount: cityData.touristNumber,
        spotCount: cityData.spotNumber,
        rating: cityData.score,

        // 保留原有的气候数据结构，但使用API返回的值
        climate: cityData.climate,

        // 使用从API获取的热门景点数据
        popularSpots: popularSpotsData,

        // 使用API获取的所有景点数据
        allSpots: allSpotData.spots || [],

        // 使用API获取的美食数据
        foods: foodsData.foods || [],

        travelNotes: travelNotesData,

        // 其他数据暂时保留模拟数据
        relatedRegions: mockRegionData.relatedRegions
      };

      // 设置美食分类
      if (foodsData && foodsData.categories) {
        foodCategories.value = ['全部', ...foodsData.categories];
      } else {
        foodCategories.value = ['全部', ...Array.from(new Set(mockRegionData.foods.map(food => food.category)))];
      }

      isLoading.value = false;

      // 初始化各组件
      nextTick(() => {
        initClimateChart();
        initPopularSpotsCarousel();
      });
    } else {
      throw new Error('获取城市数据失败');
    }
  } catch (err) {
    console.error('获取城市数据失败:', err);
    error.value = '获取城市数据失败，请稍后重试';
    isLoading.value = false;
  }
};

// 修改获取城市美食的函数
const fetchCityFoods = async (cityId) => {
  try {
    console.log('获取城市美食，城市ID:', cityId);
    const foodResponse = await getCityFoods(cityId, '');

    console.log('美食API响应:', foodResponse);

    if (foodResponse && foodResponse.data) {
      // 提取食物分类 - 后端直接返回了分类数组
      const categories = foodResponse.data.categories || [];

      // 转换美食数据格式 - 处理嵌套的数据结构
      const foods = (foodResponse.data.data || []).map(food => ({
        id: food.id,          // 使用后端提供的id
        name: food.name,
        category: food.category,
        image: food.image || 'https://placekitten.com/300/300', // 如果没有图片，使用默认图片
        description: food.description
      }));

      console.log('处理后的美食数据:', foods);
      console.log('美食分类:', categories);

      return { foods, categories };
    }

    return { foods: [], categories: [] };
  } catch (err) {
    console.error('获取美食数据失败:', err);
    return { foods: [], categories: [] }; // 错误时返回空数组
  }
};

// 添加获取所有景点的函数
const fetchAllSpots = async (cityId, page) => {
  try {
    const spotResponse = await getAllCitySpots(cityId, page, itemsPerPage);

    if (spotResponse && spotResponse.data) {
      // 获取景点总数和当前页景点数据
      const { total, spots, types } = spotResponse.data;

      // 更新景点类型列表
      if (types && types.length > 0) {
        spotTypes.value = types;
      }

      // 更新region对象中的allSpots属性
      region.value.allSpots = spots.map(spot => ({
        id: spot.spotId,
        name: spot.spotName,
        type: spot.type,
        price: spot.averageCost || 0,
        openTime: spot.openingHours || '暂无信息',
        visitDuration: spot.visitDuration || '约1小时',
        rating: spot.score || 0,
      }));

      // 更新总页数
      totalPages.value = Math.ceil(total / itemsPerPage);

      // 返回处理后的数据
      return {
        spots: spots.map(spot => ({
          id: spot.spotId,
          name: spot.spotName,
          type: spot.type,
          price: spot.averageCost || 0,
          openTime: spot.openingHours || '暂无信息',
          visitDuration: spot.visitDuration || '约1小时',
          rating: spot.score || 0,
        })),
        total,
        types
      };

    }

    return { spots: [], total: 0, types: [] }; // 返回默认值
  } catch (err) {
    console.error('获取景点数据失败:', err);
    return { spots: [], total: 0, types: [] }; // 错误时也返回默认值
  }
};

// 页面切换逻辑
const changePage = async (pageNum) => {
  currentPage.value = pageNum;
  await fetchAllSpots(region.value.code , pageNum);
};

// 轮播控制
const nextPopularSpot = () => {
  if (!region.value.popularSpots) return;

  if (currentSlide.value < region.value.popularSpots.length - 1) {
    currentSlide.value++;
  } else {
    currentSlide.value = 0;
  }

  updateCarouselPosition();
};

const prevPopularSpot = () => {
  if (!region.value.popularSpots) return;

  if (currentSlide.value > 0) {
    currentSlide.value--;
  } else {
    currentSlide.value = region.value.popularSpots.length - 1;
  }

  updateCarouselPosition();
};

const updateCarouselPosition = () => {
  if (!popularSpotsCarousel.value) return;

  const slideWidth = popularSpotsCarousel.value.querySelector('.carousel-slide')?.offsetWidth || 0;
  popularSpotsCarousel.value.style.transform = `translateX(-${currentSlide.value * slideWidth}px)`;
};

// 景点排序函数
const sortSpots = async (key) => {
  if (sortKey.value === key) {
    // 如果已经按照这个键排序，则切换排序方向
    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
  } else {
    // 否则使用新键，默认升序
    sortKey.value = key;
    sortDirection.value = 'asc';
  }

  // 应用新的排序规则
  await fetchFilteredSpots();
};

// 重置筛选函数
const resetFilters = async () => {
  Object.keys(spotFilters).forEach(key => {
    spotFilters[key] = '';
  });
  currentPage.value = 1;
  await fetchAllSpots(region.value.code, 1);
};

// 筛选函数
const applyFilters = async () => {
  currentPage.value = 1;
  await fetchFilteredSpots();
};

// 筛选景点的函数
const fetchFilteredSpots = async () => {
  try {
    const filterParams = {
      type: spotFilters.type,
      priceRange: spotFilters.priceRange,
      rating: spotFilters.rating ? parseFloat(spotFilters.rating) : null,
      sortKey: sortKey.value,
      sortDirection: sortDirection.value
    };

    console.log('正在应用筛选:', filterParams);
    console.log('使用城市ID/Code:', region.value.code);

    const spotResponse = await getAllCitySpots(
        region.value.code, // 使用code而不是id
        currentPage.value,
        itemsPerPage,
        filterParams
    );

    if (spotResponse && spotResponse.data) {
      const { total, spots } = spotResponse.data;
      console.log(`获取到 ${spots.length} 个景点, 总数: ${total}`);

      // 确保有数据再更新
      if (spots && Array.isArray(spots)) {
        region.value.allSpots = spots.map(spot => ({
          id: spot.spotId,
          name: spot.spotName,
          type: spot.type,
          price: spot.averageCost || 0,
          openTime: spot.openingHours || '暂无信息',
          visitDuration: spot.visitDuration || '约1小时',
          rating: spot.score || 0,
        }));

        totalPages.value = Math.ceil(total / itemsPerPage);
      } else {
        console.error('API返回的spots数据无效:', spots);
      }
    } else {
      console.error('API响应无效:', spotResponse);
      // 不要清空现有数据
    }
  } catch (err) {
    console.error('筛选景点失败, 详细错误:', err);
    // 显示用户友好的错误信息
    error.value = '筛选景点失败，请稍后重试';
  }
};

// 景点详情操作
const viewSpotDetails = (spotId) => {
  router.push({
    path: '/spotsIntro',
    query: { id: spotId }
  });
};

// 加载评论操作
const loadMoreReviews = () => {
  // 这里应该是从API加载更多评论
  console.log('加载更多评论');
};

// 游记操作
// 处理后端返回的游记数据
const processTravelNotes = (travelogues) => {
  if (!Array.isArray(travelogues) || travelogues.length === 0) {
    console.warn("传入的游记数据不是数组或为空");
    return [];
  }

  return travelogues.map(note => {
    // 从HTML内容中提取图片URL
    const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/g;
    const imageMatches = [...note.content.matchAll(imgRegex)];
    const images = imageMatches.map(match => match[1]);

    // 如果没有从内容中找到图片，使用提供的imagePath
    if (images.length === 0 && note.imagePath) {
      images.push(note.imagePath);
    }

    // 确保至少有一张图片
    if (images.length === 0) {
      images.push('/images/default-travelogue.jpg'); // 添加一个默认图片
    }

    return {
      id: note.travelogueId,
      title: note.title,
      author: {
        name: note.user ? note.user.userName : '未知用户',
        avatar: note.user && note.user.avatar ? note.user.avatar : '/images/default-avatar.jpg'
      },
      date: note.createTime,
      views: note.viewCount || 0,
      likes: note.likeCount || 0,
      excerpt: note.easyText || note.content.replace(/<[^>]+>/g, '').substring(0, 150) + '...',
      images: images,
      tags: note.tags || [],
      isRecommended: note.isEditor || false // 如果是编辑推荐的就设为推荐
    };
  });
};


// 添加游记分页切换方法
const changeNotePage = (pageNum) => {
  // 确保页码在有效范围内
  if (pageNum >= 1 && pageNum <= totalNotePages.value) {
    currentNotePage.value = pageNum;
    // 页面切换后滚动到游记区域顶部
    const travelNotesSection = document.getElementById('travel-notes');
    if (travelNotesSection) {
      travelNotesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
};

// 查看游记详情的函数
const readTravelNote = (noteId) => {
  // 跳转到游记详细页面
  console.log('查看游记详情', noteId);
  router.push({
    path: '/travelBlogPage',
    query: { id: noteId }
  });
};

// 搜索游记的函数
const searchTravelNotes = () => {
  currentNotePage.value = 1; // 重置页码到第1页
  // 搜索逻辑已经在filteredTravelNotes计算属性中处理
};

const openWriteNoteForm = () => {
  // 打开写游记的表单或页面
  console.log('打开写游记表单');
  router.push({
    path: '/postLogue',
    query: { regionId: region.value.code } // 传递当前地区ID
  })
};

// 地区导航
const navigateToRegion = (regionId) => {
  // 跳转到其他地区页面
  console.log('导航到地区', regionId);
};


// 日期格式化，适应后端返回的ISO格式日期字符串
const formatDate = (dateString) => {
  if (!dateString) return "未知日期";

  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) {
      return "日期格式错误";
    }
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  } catch (e) {
    console.error("日期格式化错误:", e);
    return "日期错误";
  }
};

// 生命周期钩子
onMounted(() => {
  // 获取当前地区数据
  fetchRegionData(props.regionId);

  // 添加窗口大小变化监听，以便轮播响应式调整
  window.addEventListener('resize', () => {
    initPopularSpotsCarousel();
    updateCarouselPosition();
  });
});

// 监听属性变化
watch(() => props.regionId, (newRegionId) => {
  if (newRegionId) {
    fetchRegionData(newRegionId);
  }
});
</script>

<style scoped>
/* 全局样式 */
.region-page {
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.6;
}

.section {
  padding: 40px 20px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #3498db;
}

/* 导航 */
.region-header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.region-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
}

.nav-links {
  display: flex;
}

.nav-links a {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #3498db;
}

.user-actions button {
  padding: 8px 15px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-login {
  background-color: transparent;
  color: #3498db;
  border: 1px solid #3498db;
}

.btn-register {
  background-color: #3498db;
  color: white;
}

/* 封面 */
.region-cover {
  height: 500px;
  position: relative;
}

.cover-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.cover-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}

.cover-content {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  padding: 0 20px;
}

.cover-content h1 {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.region-slogan {
  font-size: 20px;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.region-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat .value {
  font-size: 32px;
  font-weight: bold;
}

.stat .label {
  font-size: 14px;
  opacity: 0.9;
}

/* 地区信息 */
.region-info {
  background-color: #f8f9fa;
}

.info-content {
  display: flex;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.info-left {
  flex: 1;
}

.region-main-image {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.info-right {
  flex: 1;
}

.info-item {
  margin-bottom: 15px;
  font-size: 16px;
}

.info-item strong {
  font-weight: 600;
  color: #2c3e50;
}

.info-description p {
  margin-bottom: 15px;
  text-align: justify;
}

/* 气候 */
/* 气候区域样式修改 */
.climate-content {
  display: flex;
  flex-direction: row;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

.climate-chart {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex: 1;
  min-width: 0;
  height: 400px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

.climate-info {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: 400px;
}

.season {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.season h3 {
  color: #3498db;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.season p {
  font-size: 13px;
  line-height: 1.4;
  color: #555;
  margin-bottom: 10px;
  flex-grow: 1;
}

.climate-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.climate-item {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.climate-item i {
  margin-right: 8px;
  color: #3498db;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .climate-content {
    flex-direction: column;
  }

  .climate-chart, .climate-info {
    width: 100%;
    height: auto;
  }

  .climate-chart {
    height: 300px;
    margin-bottom: 20px;
  }

  .climate-info {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .season {
    height: auto;
  }
}

@media (max-width: 576px) {
  .climate-info {
    grid-template-columns: 1fr;
  }
}

/* 轮播样式 */
.spots-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1000px;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  flex: 0 0 33.33%;
  padding: 0 10px;
  box-sizing: border-box;
}

.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.7);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

/* 景点卡片样式 */
.spot-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.spot-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.spot-image {
  position: relative;
  height: 180px;
}

.spot-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(52, 152, 219, 0.8);
  color: white;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: bold;
}

.spot-info {
  padding: 15px;
}

.spot-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.spot-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.spot-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 13px;
}

/* 打卡地点 */
.check-in-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

.check-in-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.check-in-image {
  position: relative;
  height: 200px;
}

.check-in-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.check-in-likes {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(231, 76, 60, 0.8);
  color: white;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
}

.check-in-info {
  padding: 15px;
}

.check-in-info h3 {
  margin-bottom: 8px;
  font-weight: 600;
}

.check-in-info p {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.check-in-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background-color: #f0f0f0;
  color: #555;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 景点列表 */
.spots-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  max-width: 1100px;
  margin: 0 auto 30px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-group label {
  margin-right: 8px;
  font-weight: 500;
}

.filter-group select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.filter-apply {
  padding: 8px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-apply:hover {
  background-color: #2980b9;
}

.filter-reset {
  padding: 8px 15px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-reset:hover {
  background-color: #c0392b;
}

.spots-list {
  overflow-x: auto;
  max-width: 1100px;
  margin: 0 auto;
}

.spots-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.spots-table th {
  background-color: #3498db;
  color: white;
  padding: 12px 15px;
  text-align: center;
  cursor: pointer;
}

.spots-table th:hover {
  background-color: #2980b9;
}

.spots-table th:nth-child(2),
.spots-table td:nth-child(2) {
  width: 80px;
  max-width: 80px;
}

.spots-table th:nth-child(7),
.spots-table td:nth-child(7) {
  width: 120px;  /* 设置操作列固定宽度 */
  max-width: 120px;
}

.spots-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.spots-table tr:last-child td {
  border-bottom: none;
}

.spots-table tr:hover {
  background-color: #f9f9f9;
}

.star-rating {
  color: #ddd;
  display: inline-flex;
  align-items: center;
}

.star-rating .filled {
  color: #f39c12;
}

.rating-number {
  margin-left: 5px;
  color: #555;
}

.btn-view-details {
  padding: 6px 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.btn-view-details:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.spots-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.spots-pagination button,
.spots-pagination span {
  min-width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.spots-pagination span.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

.spots-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 地图 */




/* 美食区域 */
.food-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.category-tab {
  padding: 8px 20px;
  background-color: #f8f9fa;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.category-tab.active {
  background-color: #3498db;
  color: white;
}

.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

.food-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.food-card:hover {
  transform: translateY(-5px);
}

.food-image {
  height: 200px;
}

.food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-info {
  padding: 20px;
}

.food-info h3 {
  margin-bottom: 10px;
  font-weight: 600;
}

.food-info p {
  color: #666;
  margin-bottom: 15px;
}

.food-restaurants h4 {
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.food-restaurants ul {
  list-style-type: none;
  padding: 0;
}

.food-restaurants li {
  padding: 5px 0;
  font-size: 13px;
  color: #777;
}

/* 显示更多按钮样式 */
.show-more-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn-show-more {
  background-color: #f8f9fa;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-show-more:hover {
  background-color: #e9ecef;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-show-more i {
  font-size: 12px;
}

/* 添加动画效果 */
.food-grid {
  transition: max-height 0.5s ease;
}

/* 折叠动画 */
.food-fade-enter-active,
.food-fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.food-fade-enter-from,
.food-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.food-fade-move {
  transition: transform 0.3s ease;
}

/* 游记区域 */
.notes-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  max-width: 1100px;
  margin: 0 auto 30px;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.filter-buttons button {
  padding: 8px 15px;
  background-color: #f8f9fa;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.filter-buttons button.active {
  background-color: #3498db;
  color: white;
}

.notes-search {
  display: flex;
}

.notes-search input {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 200px;
}

.notes-search button {
  padding: 8px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.notes-list {
  max-width: 1100px;
  margin: 0 auto;
}

.travel-note {
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.note-author {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.author-name {
  font-weight: 500;
}

.note-meta {
  display: flex;
  gap: 15px;
  color: #777;
  font-size: 13px;
}

.note-content h3 {
  margin-bottom: 15px;
  font-weight: 600;
}

.note-images {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}

.note-images img {
  width: 32%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.more-images {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
}

.note-excerpt {
  color: #555;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-read-more {
  padding: 8px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


/* 游记分页器美化 */
.notes-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 8px;
  font-family: 'Arial', sans-serif;
}

.notes-pagination button,
.notes-pagination span {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: #555;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.notes-pagination button {
  padding: 0 15px;
  font-weight: 500;
}

.notes-pagination span:hover:not(.active) {
  background-color: #f0f7fc;
  border-color: #bde0fd;
  color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.notes-pagination span.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
  font-weight: 600;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.notes-pagination span.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #fff;
  transform: translateX(-50%);
  border-radius: 2px;
}

.notes-pagination button:not(:disabled):hover {
  background-color: #f0f7fc;
  border-color: #bde0fd;
  color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.notes-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* 翻页按钮添加图标效果 */
.notes-pagination button:first-child::before {
  content: '←';
  margin-right: 5px;
}

.notes-pagination button:last-child::after {
  content: '→';
  margin-left: 5px;
}

/* 当分页组件在移动端时的样式 */
@media (max-width: 576px) {
  .notes-pagination {
    gap: 4px;
  }

  .notes-pagination button,
  .notes-pagination span {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* 在特别窄的屏幕上隐藏非当前页码和相邻页码 */
  .notes-pagination span:not(.active):not(.active + span):not(.active ~ span) {
    display: none;
  }
}

/* 添加点击涟漪效果 */
.notes-pagination span:not(.active)::after,
.notes-pagination button:not(:disabled)::after {
  content: '';
  position: absolute;
  background: rgba(52, 152, 219, 0.2);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  opacity: 1;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 这里新增一个写游记按钮的样式美化 */
.write-note {
  text-align: center;
  margin-top: 40px;
}

.btn-write-note {
  padding: 12px 24px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(231, 76, 60, 0.2);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-write-note::before {
  content: '✏️';
  font-size: 16px;
  margin-right: 2px;
}

.btn-write-note:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.3);
}

.btn-write-note:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.write-note {
  text-align: center;
  margin-top: 30px;
}

.btn-write-note {
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

/* 相关地区 */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.related-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s;
}

.related-card:hover {
  transform: translateY(-5px);
}

.related-image {
  height: 150px;
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-info {
  padding: 15px;
}

.related-info h3 {
  margin-bottom: 8px;
  font-weight: 600;
}

.related-info p {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
}

.related-similarity {
  color: #3498db;
  font-size: 13px;
  font-weight: 500;
}

/* 景点详情弹窗 */
.spot-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.spot-details {
  padding: 30px;
}

.spot-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.spot-details-header h2 {
  font-size: 24px;
  color: #2c3e50;
}

.spot-details-gallery {
  margin-bottom: 30px;
}

.main-image {
  height: 400px;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.thumbnail-list img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.thumbnail-list img.active,
.thumbnail-list img:hover {
  opacity: 1;
}

.spot-details-info {
  display: grid;
  gap: 30px;
}

.info-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.info-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.transport-item {
  margin-bottom: 15px;
}

.transport-item h4 {
  color: #3498db;
  margin-bottom: 5px;
}

.reviews-summary {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.rating-distribution {
  margin-bottom: 20px;
}

.rating-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rating-label {
  width: 50px;
}

.bar-container {
  flex: 1;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 0 10px;
  overflow: hidden;
}

.bar {
  height: 100%;
  background-color: #f39c12;
}

.rating-percentage {
  width: 40px;
  text-align: right;
  font-size: 13px;
}

.rating-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.review-tag {
  background-color: #f0f0f0;
  color: #555;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.spot-reviews {
  margin-top: 20px;
}

.review {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer {
  display: flex;
  align-items: center;
}

.reviewer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}
.reviewer-name {
  font-weight: 500;
  font-size: 14px;
}

.review-date {
  font-size: 12px;
  color: #777;
}

.review-rating {
  color: #f39c12;
  font-size: 14px;
}

.review-content {
  font-size: 14px;
  color: #444;
}

.review-content p {
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.review-images img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.show-more-reviews {
  text-align: center;
  margin-top: 20px;
}

.show-more-reviews button {
  padding: 8px 20px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.spot-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  justify-content: center;
}

.spot-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-add-plan {
  background-color: #3498db;
  color: white;
}

.btn-book-ticket {
  background-color: #27ae60;
  color: white;
}

.btn-write-review {
  background-color: #f39c12;
  color: white;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .info-content {
    flex-direction: column;
  }

  .carousel-slide {
    flex: 0 0 50%;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .region-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .cover-content h1 {
    font-size: 36px;
  }

  .carousel-slide {
    flex: 0 0 100%;
  }

  .notes-filter {
    flex-direction: column;
    gap: 15px;
  }

  .notes-search {
    width: 100%;
  }

  .notes-search input {
    flex: 1;
  }

  .spot-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 24px;
  }

  .cover-content h1 {
    font-size: 28px;
  }

  .region-slogan {
    font-size: 16px;
  }

  .stat .value {
    font-size: 24px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .spots-filter {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group select {
    width: 100%;
  }

  .filter-reset {
    width: 100%;
  }
}

/* 图标样式 */
.icon-temperature,
.icon-humidity,
.icon-rainfall {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-temperature {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 2C8.13 2 5 5.13 5 9v7.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V9c0-3.87-3.13-7-7-7zm0 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>');
}

.icon-humidity {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.41 3.4 8.2 8 8.2s8-3.79 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2z"/></svg>');
}

.icon-rainfall {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64c0 2 .78 4.11 2.34 5.67 1.56 1.56 3.64 2.35 5.66 2.35 2.02 0 4.1-.79 5.66-2.35 1.56-1.56 2.34-3.67 2.34-5.67 0-2-0.78-4.08-2.34-5.64zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"/></svg>');
}

/* 确保leaflet地图样式被正确加载 */


</style>